<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>留言板1.0</title>
	<link rel="stylesheet" href="./temp/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="./index.php">留言板</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>
   <div class="container" style="margin-top: 80px;">
    
      <div class="row" style="margin-top: 50px;">
      	<div class="col-sm-12">
        <form action="./addUser.php" method="post" class="form-horizontal" id="regform">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label"></label>
            <div class="col-sm-4" style="color: red" id="notice">
            <!-- <span class="glyphicon glyphicon-remove"></span>用户已存在，请重新输入。 -->
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-4">
              <input type="text" name="username" class="form-control"  placeholder="用户名">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">手机</label>
            <div class="col-sm-4">
              <input type="text" class="form-control"  name="phone" placeholder="手机">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-4">
              <input type="password" class="form-control"  name="password" placeholder="密码">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">确认密码</label>
            <div class="col-sm-4">
              <input type="password" class="form-control"  name="repassword" placeholder="确认密码">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit"  id="sub" class="btn btn-success">注册</button>
            </div>
          </div>
        </form>
		<div class="col-sm-4">
      </div>
	</div>
  <script>
    
    $(function(){


        $('input').blur(function(event) {

            data = $('#regform').serialize();

            $.ajax({
              url: './checkData.php',
              type: 'POST',
              dataType: 'json',
              data: data,
            })
            .done(function(res) {
              if(res.code==1){
                $('#notice').html('<span class="glyphicon glyphicon-remove"></span>'+res.msg);
              }else{
                $('#sub').removeAttr('disabled');
              }
              // todo:: 实现通讯成功后的操作
              console.log("success");
            })
            .fail(function() {
              alert("服务器很忙，请等下再试");
            })
        });

        $('input').focus(function(event) {
          $('#notice').empty();
        });
    })

  </script>
</body>
</html>